// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
//全局组件
Vue.component("TodoItem", {
  props:['content'],
  template:"<li>{{content}}</li>"
});

//局部组件
var ToItem = {
  props:['content', 'index'],
  template:"<li v-on:click='itemClick'>{{content}}</li>",
  methods:{
    itemClick:function(){
      this.$emit("delete", this.index);
    }
  }
};

var app = new Vue({
  el: '#app',
  components:{
    ToItem
  },
  data:{
    name:'lauwen',
    list:[1, 2],
    inputValue:"",
    valueList:[]
  },
  methods:{
    btnClick:function(){
      this.valueList.push(this.inputValue);
      this.inputValue = ""
    },
    itemClicks:function(index){
      alert(index);
      this.valueList.splice(index, 1);
    }
  }
});

var lifeCycle = new Vue({
  el:'#lifeCycle',
  // template:"<h1>{{message + '这是template中的，会被优先渲染'}}</h1>",
  data:{
    message:"Vue lifeCycle",
  },
  // render:function(createElement){
  //   return createElement('h1', this.message + "这是在render(createElement)中，优先级 > template > outerHTML");
  // },
  beforeCreate:function(){
    console.group("Vue实例创建前");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  created:function(){
    console.group("Vue实例创建后");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeMount:function(){
    console.group("挂载前");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  mounted:function(){
    console.group("挂载后");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeUpdate:function(){
    console.group("更新前");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  updated:function(){
    console.group("更新后");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  beforeDestroy:function(){
    console.group("销毁前");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  },
  destroyed:function(){
    console.group("销毁后");
    console.log(this.$el);
    console.log(this.$data);
    console.log(this.message);
  }
});

window.test = new Vue({
  el:"#com",
  data:{
    a:'Xuewen',
    b:'Lu',
    c:'Xuewen Lu'
  },
  // computed:{
  //   cc:function(){
  //     console.log("computed once");
  //     this.c = this.a + " " + this.b;
  //   }
  // },
  // methods:{
  //   cm:function(){
  //     console.log("method once");
  //     this.c = this.a + " " + this.b;
  //   }
  // },
  watch:{
    a:function(){
      this.c = this.a + " " + this.b;
    },
    b:function(){
      this.c = this.a + " " + this.b;
    }
  }
});
window.com = new Vue({
  el:"#computed",
  data:{
    a:'Xwen',
    b:'Lu'
  },
  computed:{
    c:{
      get:function(){
        return this.a + " " + this.b
      },
      set:function(value){
        var arr = value.split(" ");
        this.a = arr[0];
        this.b = arr[1];
      }
    }
  }
});
window.style = new Vue({
  el:"#style",
  data:{
    isActive:false,
    isActives:"",
    styleObj:{
      color:"red",
      fontWeight:"bold"
    }
  },
  methods:{
    beClick:function(){
      this.isActive = !this.isActive;
    },
    beClicks:function(){
      this.isActives = this.isActives === "active" ? "" : "active";
    },
    beClickos:function(){
      this.styleObj.color = this.styleObj.color === "red" ? "black" : "red";
    }
  }
});

window.vif = new Vue({
  el:"#vif",
  data:{
    Hello:"Hello World",
    show:'a'
  }
});
window.vlist = new Vue({
  el:"#vlist",
  data:{
    list:[
      "hello",
      "world"
    ],
    obj:{
      name:"lauwen",
      sex:"female"
    }
  }
});